<template>
    <div class="infinite-list-wrapper" style="overflow: auto">
        <div>
            <div class="head-input">
                <el-radio-group v-model="searchForm.status">
                    <el-radio :value="'已同意'">已同意</el-radio>
                    <el-radio :value="'已拒绝'">已拒绝</el-radio>
                </el-radio-group>
                <div class="mt-4">
                    <el-input
                    v-model="searchForm.title"
                    style="max-width: 500px"
                    placeholder="请输入标题"
                    class="input-with-select"
                    >
                    <template #append>
                        <el-button :icon="Search" @click="search"/>
                    </template>
                    </el-input>
                </div>
            </div>
        </div>
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li v-for="item in tableData" class="list-item">
            <div style="width: 100%;height: 100%;"  @click="view(item.id)">
                <div class="table-title">
                    {{ item.title }}
                </div>
                <div class="table-content">
                    <div>
                        {{ item.content.length > 155 ? item.content.substring(0, 155) + '...' : item.content  }}
                    </div>
                </div>
                <div class="table-status">
                    <div>
                        {{ item.deliverTime }}
                    </div>
                    <div style="color: #95d475;" v-if="item.status=='已同意'">
                        {{ item.status }}
                    </div>
                    <div style="color: #f89898;" v-else>
                        {{ item.status }}
                    </div>
                </div>
            </div>
        </li>
      </ul>
      <Loading v-if="loading"></Loading>
      <p v-if="noMore">没有更多数据了</p>
    </div>
</template>
  
<script lang="ts" setup>
import { computed, ref ,onMounted} from 'vue'
import Loading from './loading.vue';
import tool from '@/utils/tool'
import officeRequestService from '@/api/organization/officeRequestService.js'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router=useRouter()
onMounted(()=>{
})
//当前登录用户
const currentUser=tool.data.get("USER_INFO");
var agency=[]
//分页对象
const tablePage= {
    total: 0,
    currentPage: 1,
    pageSize: 4,
    orders: [{ column: "deal_time", asc: false }],
}
//标记当前数据量
const count = ref(0)
const loading = ref(false)
const noMore = computed(() => count.value-1 >= tablePage.total)
const disabled = computed(() => loading.value || noMore.value)
//加载数据函数
const load = () => {
    loading.value = true
    refreshList()
}
//表格数据
const tableData=ref([])

const searchForm= ref({
    userId:currentUser.id,
    status:"已同意",
    title:""
})
const refreshList=()=> {
    officeRequestService.page({
    'current': tablePage.currentPage,
    'size': tablePage.pageSize,
    'orders': tablePage.orders,
    ...searchForm.value
    }).then((data) => {
        agency = data.records
        tablePage.total = data.total
        for(let i=0;i<agency.length;i++){
            tableData.value.push(agency[i])
        }
        count.value += 4
        tablePage.currentPage+=1;
        loading.value = false
    })
}

//查询函数
const search=()=>{
    count.value=0
    tablePage.total=0
    tablePage.currentPage=1
    tableData.value=[]
}
//查看稿件
const view=(val)=>{
    router.push({ name: "view" , params : { id: val} })
}
</script>

<style scoped>
.head-input{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.infinite-list-wrapper {
    height:80vh;
    text-align: center;
}
.infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list-wrapper .list-item {
    width: 98%;
    height: 170px;
    font-size: 15px;
    box-shadow: 0 0 4px 2px rgb(0, 0, 0,0.1) ;
    margin: 25px auto;
    cursor: pointer;
}
.infinite-list-wrapper .list-item + .list-item {
    margin-top: 10px;
}
.table-title{
    height: 15%;
}
.table-content{
    height: 55%;
    text-align: left;
    overflow: hidden;
}
.table-content div{
    margin: 3px 10px;
}
.table-status{
    height: 30%;
    text-align: left;
}
.table-status div{
    margin:0 10px;
}
</style>